<template>
	<div class="tuan-join-wrap">
		<div class="join-info clearfix">
			<img src="" alt="" class="info-img">
			<div class="info-wrap">
				<div class="info-head">
					<i class="icon-type">新人团</i><span class="info-head-title">限未到店新客参团</span>
				</div>
				<div class="info-title">依恋家纺车依恋家纺车载三USB充电器</div>
				<div class="info-price-msg">
					<div class="now-price"><span class="tuan-number">2人团</span><em>&yen;</em>150</div>
					<div class="old-price">单买价:&yen;200</div>
				</div>
			</div>
		</div>
		<div class="join-member">
			<div class="count-time">还剩<span class="time-box"></span>结束</div>
			<div class="join-type">拼团成功</div>
			<ol class="join-staff clearfix">
				<li class="staff-item"><img src="" alt="头像1" class="item-img" /></li>
				<li class="staff-item"><img src="" alt="头像2" class="item-img" /></li>
				<li class="staff-item"><img src="" alt="头像3" class="item-img" /></li>
				<li class="staff-item"><img src="" alt="头像4" class="item-img" /></li>
				<li class="staff-item"><img src="" alt="头像5" class="item-img" /></li>
			</ol>
		</div>
		<!--活动规则-->
		<div class="rule">
			<rule></rule>
		</div>
		<!--商品描述-->
		<div class="describe">
			<describe></describe>
		</div>
		<!--按钮-->
		<div class="join-submit">
			<a href="#" class="join-btn">一键参团</a>
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import rule from '../common/rule.vue';
	import describe from '../common/describe.vue';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				staffDefault:''
			};
		},
		components: {
			rule,describe
		},
		created (){

		},
		mounted (){
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/common.scss";
	body{
		background-color:#fff;
	}

	.join-info{
		padding:rem(15);
		border-top:1px solid #e7e7e7;
		border-bottom:1px solid #e7e7e7;
		.info-img{
			width:rem(165);
			height:rem(110);
			float:left;
			margin-right:rem(10);
		}
		.info-wrap{
			width:rem(170);
			float:left;
		}
		.info-head{
			font-size:rem(11);
			color:#ff6600;
			margin-bottom:rem(8);
		}
		/*info-head团购状态的小标签*/
		.icon-type{
			width:rem(43);
			height:rem(18);
			line-height:rem(18);
			text-align:center;
			display:inline-block;
			background-color:#ffefe5;
			margin-right:rem(11);
		}
		.info-title{
			color:#000;
			font-size:rem(15);
			margin-bottom:rem(5);
		}
		.info-price-msg{
			
		}
		.now-price{
			font-size:rem(15);
			color:#e62116;
			margin-bottom:rem(5);
			em{
				font-size:rem(10);
			}
			.tuan-number{
				font-size:rem(13);
				color:#000;
			}
		}
		.old-price{
			font-size:rem(11);
			color:#999;
		}
	}
	/*内容部分*/
	.join-member{
		padding:rem(15);
		background-color:#fff;
		border-bottom:rem(8) solid #f6f6f6;
		.count-time{
			width:rem(162);
			margin:0 auto;
			font-size:rem(15);
		}
		.join-type{
			text-align:center;
			font-size:rem(15);
			color:#ff6600;
			margin:rem(8) 0 rem(10) 0;
		}
		.join-staff{
		}
		.staff-item{
			float:left;
			background-color:#f6f6f6;
			margin-right:rem(15);
			border-radius: 25px;
			.item-img{
				width:rem(56);
				height:rem(56);
				border-radius: 25px;
			}
		}
		/*修补型样式*/
		.staff-item:last-child{
			margin:0;
		}
	}
	/*活动规则*/
	.rule{
		border-bottom:rem(8) solid #f6f6f6;
	}
	.describe{
		padding-bottom:rem(48);
	}
	/*一键参团*/
	.join-submit{
		width:100%;
		padding:rem(8) rem(10);
	    border-top: 1px solid #e7e7e7;
		background-color:#fff;
		position:fixed;
		left:0;
		right:0;
		bottom:-2px;
	}
	.join-btn{
		width:100%;
		height:100%;
		line-height:rem(44);
		background-color:#ff6600;
		border-radius:4px;
		display:block;
		font-size:rem(17);
		text-align:center;
		margin:0 auto;
		color:#fff;
		
	}
</style>
